<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>xhr发送http请求</h1>
    <input type="text" placeholder="请输入学生姓名"> <button onclick="search()">搜索</button>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>联系方式</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <button onclick="postHttp()">发送post请求</button>
    <button onclick="postParamsHttp()">xhr发送post请求传递参数</button>
    <h2></h2>
</body>
<script>
    // 创建xhr实例 XMLHttpRequest 
    let xhr = new XMLHttpRequest();
    // 设置请求方式 请求地址
    xhr.open('get','/list')
    // 发送请求
    xhr.send();
    // 监听请求状态
    xhr.onreadystatechange = ()=>{
        // 0 1 2 3 4
        // 判断状态码是否位4
        if(xhr.readyState === 4){
            //获取服务端响应数据
            console.log(xhr.response)
            let data = JSON.parse(xhr.response)
            console.log(data)
            let html = "";
            data.forEach(item=>{
                let tr = `<tr>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.phone}</td>
                    </tr>`
                    html+=tr;
            })
            document.querySelector("tbody").innerHTML = html;
        } 
    }

    function search(){
        // 获取输入框内容
        let stuname = document.querySelector("input").value;
        let xhr = new XMLHttpRequest();
        //get 请求传递参数 可以将请求参数拼接到请求路径上 多个参数 使用& 符号分割 例如: /list?name='张三'&age=18&sex=男
        xhr.open("get",'/search/stu?username='+stuname+"&age=18&sex=男");
        xhr.send();
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState===4){
                console.log(xhr.response)
                data = JSON.parse(xhr.response);
                let html = "";
            data.forEach(item=>{
                let tr = `<tr>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.phone}</td>
                    </tr>`
                    html+=tr;
            })
            document.querySelector("tbody").innerHTML = html;
            }
        }
    }

    function postHttp(){
        let xhr = new XMLHttpRequest();
        xhr.open("post",'/get/move');
        xhr.send();
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState === 4){
                console.log(xhr.response)
                document.querySelector("h2").innerText = xhr.response;
            }
        }
    }

    function postParamsHttp(){
        let username = document.querySelector("input").value;
        let xhr = new XMLHttpRequest();
        xhr.open("post",`/get/msg`);
        /* 
        常见的content-type:
        1.application/x-www-form-urlencoded 表示请求参数为fromData类型
        2. text/plain  表示请求参数为文本类型
        3. multipart/form-data 表示参数为数据流类型 用于上传文件
        4. application/json; charset=utf-8 表示 请求参数为 json对象类型
        */
        // 设置请求头类型为 application/x-www-form-urlencoded
        xhr.setRequestHeader("Content-Type",'application/x-www-form-urlencoded')
        // xhr发送post请求传递参数 多个参数之间使用&符拼接
        xhr.send(`name=${username}&age=28&sex=男`);
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState === 4){
                console.log(xhr.response)
            }
        }
    }
</script>
</html>